<template>
  <div class="shopindex">
    <div class="top">
      <van-icon
        name="arrow-left"
        color="#1989fa"
        size="30"
        @click="$router.back()"
      />
      <div
        class="bgcimg"
        :style="`background-image: url(//elm.cangdu.org/img/${this.shopMessage.image_path});`"
      ></div>
      <div class="head">
        <!-- 头像 -->
        <div class="headPortrait">
          <!-- src="//elm.cangdu.org/img/17be463298299731.jpg" -->
          <img
            :src="'//elm.cangdu.org/img/' + this.shopMessage.image_path"
            alt=""
          />
        </div>
        <!-- 商家名称部分 -->
        <div class="Merchantdetails">
          <h5>{{ this.shopMessage.name }}</h5>
          <p>
            商家配送 / 分钟送达 / {{}}
            <!-- this.shopMessage.piecewise_agent_fee.tips -->
          </p>
          <p class="proclamation">公告:{{ this.shopMessage.promotion_info }}</p>
        </div>
        <!-- 优惠券部分 -->
        <div class="coupon">
          <p>
            <van-icon name="gold-coin" />
            满30减5,满50减8(APP专享)
          </p>
          <p class="activity">
            1个活动
            <van-icon name="arrow" />
          </p>
        </div>
      </div>
    </div>
    <van-tabs v-model="active" animated>
      <!-- /shopList/goods-detail -->
      <van-tab
        title="商品"
        :to="{ path: '/shopList/goods-detail', query: { restaurant_id: id } }"
      ></van-tab>
      <van-tab
        title="评价"
        :to="{ path: '/shopList/goods-comment', query: { restaurant_id: id } }"
      ></van-tab>
    </van-tabs>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { restaurant } from "@/api/goods-details.js";
export default {
  data() {
    return {
      active: 0,
      id: 2,
      shopMessage: [],
    };
  },
  created() {
    let ids = this.$route.query.restaurant_id;
    this.id = ids;
    restaurant(ids).then((res) => {
      this.shopMessage = res.data;
      console.log(13, this.shopMessage);
    });
  },
  methods: {},
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.shopindex {
  min-width: 375px;
  max-width: 414px;
}
.top {
  position: relative;
}
// 背景图片模糊
.bgcimg {
  position: absolute;
  filter: blur(8px);
  background-repeat: no-repeat;
  background-position: center -3px;
  background-size: contain;
  height: 100%;
  width: 100%;
}
.head {
  background-color: rgba(119, 103, 137, 0.43);
  position: relative;
  // background-color: rgba(174, 175, 191, 0.8);
  // background-color: red;
  height: 127px;
  .headPortrait {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 75px;
    height: 75px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .Merchantdetails {
    padding-top: 15px;
    margin-left: 95px;
    height: 70px;
    line-height: 23px;
    color: #fff;
    h5 {
      font-weight: 700;
      font-size: 25px;
    }
    p {
      margin: 8px 0 0 0;
      color: #fff;
      font-size: 12px;
    }
    .proclamation {
      margin-top: 2px;
    }
  }
  .coupon {
    position: absolute;
    bottom: 13px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .van-icon {
      color: red;
    }
    p {
      font-size: 1px;
      color: #fff;
    }
    .activity {
      margin-right: 10px;
      .van-icon {
        color: #fff;
      }
    }
  }
}
/deep/ .van-tabs--line {
  .van-tabs__wrap {
    height: 59px;
  }
}
.van-icon {
  position: absolute;
  top: 10px;
  left: -2px;
  &::before {
    position: absolute;
    z-index: 99;
  }
}
</style>
